import * as echarts from 'echarts';
import React, { useEffect, useRef } from 'react';

const MultipleBarCharts = () => {
  const chartRef = useRef(null);

  useEffect(() => {
    // 初始化Echarts实例
    const chartInstance = echarts.init(chartRef.current);

    // 定义数据
    const data = [
      { year: '2019', value: [120] },
      { year: '2020', value: [160] },
      { year: '2021', value: [220] }
    ];

    // 配置选项
    const options = {
      tooltip: {},
      legend: {
        data: ['Series 1']
      },
      xAxis: {
        data: data.map(item => item.year)
      },
      yAxis: {},
      series: data[0].value.map((_, index) => ({
        name: `Series ${index + 1}`,
        type: 'bar',
        data: data.map(item => item.value[index])
      }))
    };

    // 设置配置项并渲染图表
    chartInstance.setOption(options);

    // 组件销毁时销毁图表实例
    return () => {
      chartInstance.dispose();
    };
  }, []);

  return <div ref={chartRef} style={{ width: '100%', height: '400px' }} />;
};

export default MultipleBarCharts;
